<template>
    <div class="question-management">
        <el-row :gutter="20" class="filter-row" align="middle">
            <el-col :span="4">
                <el-button type="primary" :icon="Plus" class="add-button" @click="showDialog = true">添加</el-button>
            </el-col>

            <el-col :span="4">
                <el-select v-model="selectedCategory1" placeholder="题目类别1">
                    <el-option
                        v-for="item in categoryOptions1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select v-model="selectedCategory2" placeholder="题目类别2">
                    <el-option
                        v-for="item in categoryOptions2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select v-model="selectedKnowledgePoint" placeholder="知识点">
                    <el-option
                        v-for="item in knowledgePointOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-input v-model="searchText" placeholder="输入关键字"></el-input>
            </el-col>
            <el-col :span="4" class="search-button-container">
                <el-button type="primary" :icon="Search" class="search-button">搜索</el-button>
            </el-col>
        </el-row>
        <el-table :data="tableData" style="width: 100%; margin-top: 20px;" :height="tableHeight" :row-class-name="tableRowClassName">
            <el-table-column prop="index" label="序号" width="80">
            </el-table-column>
            <el-table-column prop="category" label="题目类别">
            </el-table-column>
            <el-table-column prop="knowledgePoint" label="知识点">
            </el-table-column>
            <el-table-column prop="name" label="题目名称">
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="scope">
                    <el-tag :type="scope.row.status === '进行中' ? 'success' : 'info'">{{ scope.row.status }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="startTime" label="创建时间">
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="tableData.length">
            </el-pagination>
        </div>
        <el-dialog title="添加题库分类" v-model="showDialog" width="500px">
            <el-form :model="form" label-width="100px">
                <el-form-item label="题目类别1">
                    <el-select v-model="form.category1" placeholder="请选择题目类别1">
                        <el-option
                            v-for="item in categoryOptions1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="题目类别2">
                    <el-select v-model="form.category2" placeholder="请选择题目类别2">
                        <el-option
                            v-for="item in categoryOptions2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="知识点">
                    <el-select v-model="form.knowledgePoint" placeholder="请选择知识点">
                        <el-option
                            v-for="item in knowledgePointOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="题目名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
            </el-form>
            <!-- 修改部分 -->
    <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="addCategory">确定</el-button>
        </div>
    </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Plus, Search } from '@element-plus/icons-vue';

const selectedCategory1 = ref('');
const selectedCategory2 = ref('');
const selectedKnowledgePoint = ref('');
const searchText = ref('');

const categoryOptions1 = [
    { value: '1', label: '类别1' },
    { value: '2', label: '类别2' }
];

const categoryOptions2 = [
    { value: '1', label: '类别1' },
    { value: '2', label: '类别2' }
];

const knowledgePointOptions = [
    { value: '1', label: '知识点1' },
    { value: '2', label: '知识点2' }
];

const tableData = [
    { index: '01', category: '类别1', knowledgePoint: '知识点1', name: '题目1', status: '进行中', startTime: '2021-08-25 14:40' },
    { index: '02', category: '类别2', knowledgePoint: '知识点2', name: '题目2', status: '未开课', startTime: '2021-08-25 14:40' },
    { index: '03', category: '类别1', knowledgePoint: '知识点1', name: '题目3', status: '未开课', startTime: '2021-08-25 14:40' },
    { index: '04', category: '类别1', knowledgePoint: '知识点1', name: '题目4', status: '进行中', startTime: '2021-08-25 14:40' },
    { index: '05', category: '类别2', knowledgePoint: '知识点2', name: '题目5', status: '未开课', startTime: '2021-08-25 14:40' },
    { index: '06', category: '类别1', knowledgePoint: '知识点1', name: '题目6', status: '未开课', startTime: '2021-08-25 14:40' },
    { index: '07', category: '类别1', knowledgePoint: '知识点1', name: '题目7', status: '进行中', startTime: '2021-08-25 14:40' },
    { index: '08', category: '类别2', knowledgePoint: '知识点2', name: '题目8', status: '未开课', startTime: '2021-08-25 14:40' },
    { index: '09', category: '类别1', knowledgePoint: '知识点1', name: '题目9', status: '未开课', startTime: '2021-08-25 14:40' },
    { index: '10', category: '类别1', knowledgePoint: '知识点1', name: '题目10', status: '进行中', startTime: '2021-08-25 14:40' },
    { index: '11', category: '类别2', knowledgePoint: '知识点2', name: '题目11', status: '未开课', startTime: '2021-08-25 14:40' },
    { index: '12', category: '类别1', knowledgePoint: '知识点1', name: '题目12', status: '未开课', startTime: '2021-08-25 14:40' }
];

const tableHeight = ref('400px'); // 表格高度保持一致
const showDialog = ref(false);
const form = ref({
    category1: '',
    category2: '',
    knowledgePoint: '',
    name: ''
});

const addQuestion = () => {
    tableData.push({
        index: String(tableData.length + 1).padStart(2, '0'),
        category: form.value.category1,
        knowledgePoint: form.value.knowledgePoint,
        name: form.value.name,
        status: '未开课',
        startTime: new Date().toLocaleString()
    });
    showDialog.value = false;
};

const tableRowClassName = ({ rowIndex }) => {
    return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
};

onMounted(() => {
    const updateTableHeight = () => {
        tableHeight.value = `${window.innerHeight - 300}px`; // 表格高度保持一致
    };
    updateTableHeight();
    window.addEventListener('resize', updateTableHeight);
});
</script>

<style scoped>
.question-management {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
}

.add-button {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 修改为居左 */
}

.search-button-container {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 修改为居右 */
}

.search-button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.el-input {
    width: 100%;
}

.pagination-container {
    margin-top: 20px;
    text-align: right;
    width: 100%;
}

.dialog-footer {
    text-align: right;
}

::v-deep .even-row {
    background-color: #e6f7e6 !important; /* 浅绿色 */
}

::v-deep .odd-row {
    background-color: #fff9e6 !important; /* 浅黄色 */
}
</style>
